<template v-if="show">
  <div style="position: absolute;width: 100%;height: 100%;top: 0;left: 0;opacity: 0.5">
    <img src="/background.webp">
  </div>
  <div class="waterfall">
    <div
        v-for="(column, index) in columns"
        :key="index"
        class="column"
        :style="{ width: '300px' }"
    >
      <n-card
          v-for="item in column"
          class="item"
      >
        <template #cover>
          <img :src="item.image" alt="Item Image" />
        </template>
        <n-flex justify="space-between" style="height: 100px;">
          <p class="">{{ item.content }}</p>
          <n-flex justify="space-between" align="center" style="width: 100%;">
            <n-space align="flex-end" style="bottom: 0;">
              <n-avatar
                  round
                  size="small"
                  src="messageAvatar/头像.jpg"
              />
              <div style="margin: 0 auto;height: 30px;">2233不问天</div>
            </n-space>
            <n-rate readonly :default-value="3" size="small"/>
          </n-flex>
        </n-flex>
      </n-card>
    </div>
  </div>
  <n-flex>
    <n-float-button  position="fixed" type="primary" menu-trigger="click" style="left: 95%;top: 85%;width: 50px;height: 50px;">
      <el-icon><Plus /></el-icon>
      <template #menu>
        <n-float-button shape="square" type="primary" style="width: 50px;height: 50px;" @click="setOrderShow=true">
          <el-icon><Plus /></el-icon>
        </n-float-button>
        <n-float-button v-show="loginUser != null && loginUser.level == 20" style="width: 50px;height: 50px;">
          <el-icon ><Plus /></el-icon>
        </n-float-button>
        <n-float-button @click="setLocation=true" style="width: 50px;height: 50px;">
          <el-icon><Location /></el-icon>
        </n-float-button>
      </template>
    </n-float-button>
    <n-back-top  style="width: 50px;height: 50px;top: 91%;left: 95%"></n-back-top>
  </n-flex>

  <n-modal v-model:show="setOrderShow">
    <n-card
        style="width:700px;height:600px"
        :bordered="false"
        size="huge"
        role="dialog"
        aria-modal="true"
        title="发起订单"
    >
      <n-flex vertical>
        <n-form :model="newOrder"
                label-placement="top"
        >
          <n-grid :cols="24" :x-gap="24">
            <n-form-item-gi span="12" label="订单价格">
              <n-input placeholder="请输入价格" v-model:value="newOrder.orderPrice"></n-input>
            </n-form-item-gi>
            <n-form-item-gi span="12" label="订单类型">
              <n-select placeholder="请选择类型" v-model:value="newOrder.orderType" :options="orderTypeOptions"></n-select>
            </n-form-item-gi>
          </n-grid>
          <n-grid :cols="24" :x-gap="24">
            <n-form-item-gi span="12" label="位置">
              <n-select placeholder="请选择位置" v-model:value="newOrder.endLocation" :options="locationOptions"></n-select>
            </n-form-item-gi>
            <n-form-item-gi span="12" label="标题">
              <n-input placeholder="请输入标题" v-model:value="newOrder.orderTitle"></n-input>
            </n-form-item-gi>
          </n-grid>
          <n-grid :cols="24" :x-gap="24">
            <n-form-item-gi span="24" label="订单描述">
              <n-input type="textarea" placeholder="请输入订单描述" style="width:100%;max-height:180px;word-break:break-all" v-model:value="newOrder.orderDescription"></n-input>
            </n-form-item-gi>
          </n-grid>
        </n-form>
        <n-button strong secondary type="primary" style="width: 100%" @click="setOrder">
          发起订单
        </n-button>
      </n-flex>
    </n-card>
  </n-modal>

  <n-modal v-model:show="setLocation">
    <n-card
        style="width: 300px"
        :bordered="false"
        size="huge"
        role="dialog"
        aria-modal="true"
    >
      位置信息:
      <n-select placeholder="请选择位置" v-model:value="thisLocation" :options="locationOptions"></n-select>
    </n-card>
  </n-modal>

</template>

<script setup>
import { ref, onMounted } from 'vue';
import {NCard, useMessage} from 'naive-ui';
import axios from "axios";
import qs from "qs";
import {loadingBar} from "../HomeView_N.vue"

const show = ref(false);

const message = useMessage();


const setLocation = ref(false);

const setOrderShow = ref(false);

//业务类型标签
const orderTypeOptions = ref([
  {label: '拿外卖', value: '拿外卖'},
  {label: '打饭', value: '打饭'},
  {label: '送厕纸', value: '送厕纸'},
  {label: '拿快递', value: '拿快递'},
  {label: '跑腿', value: '跑腿'},
]);

//位置标签
const locationOptions = ref([
  {label: '怡园', value: '怡园'},
  {label: '憬园', value: '憬园'},
  {label: '恒园', value: '恒园'},
  {label: '恬园', value: '恬园'},
  {label: '西北教学楼', value: '西北教学楼'},
  {label: '计算机重点实验室', value: '计算机重点实验室'},
  {label: '中央教学楼', value: '中央教学楼'},
  {label: '图书馆', value: '图书馆'},
]);

const newOrder = ref({
  orderId: '',
  riderId: '',
  userId: '',
  creationTime: '',
  acceptTime: '',
  endTime: '',
  startLocation: '',
  endLocation: null,
  orderType: null,
  orderPrice: '',
  orderStatus: '',
  orderReview: '',
  orderRate: '',
  orderDescription: '',
  orderTitle:''
});

const setOrder = () => {
  console.log(newOrder.value);
  newOrder.value.userId = loginUser.value.userId;
  newOrder.value.orderStatus = '待接单';
  let data = qs.stringify(newOrder.value);
  console.log(data);
  axios.post(BASE_URL+'/v1/order/insert',data).then((response) => {
    if (response.data.code === 2000) {
      message.success('发起订单成功!');
      setOrderShow.value = false;
    }else {
      message.error('订单发起失败咯~');
    }
  })
  console.log(data);
}

const thisLocation = ref();


const order = ref([]);

const loadOrder = ()=>{
  axios.get(BASE_URL + '/v1/order/select?orderStatus='+'已完成').then((response) => {
    if(response.data.code == 2000) {
      order.value = response.data.data;
      console.log(order.value);
    }else{
      message.error('订单加载失败喽~');
    }
  })
}

function distributeItems() {
  const items = getDataList();
  columns.value = [];
  const columnCount = 5;
  for (let i = 0; i < columnCount; i++) {
    columns.value.push([]);
  }

  items.forEach((item, index) => {
    const columnIndex = index % columnCount;
    columns.value[columnIndex].push(item);
  })
  console.log(columns.value);
}

const loginUser = ref({userId: '', username: '', level: ''});

onMounted(() => {
  loginUser.value = getUser();
  columns.value = {};
  distributeItems();
  loadOrder();
  // 设置后置路由守卫
  loadingBar.finish();
  show.value = true;
});

const handleLoad = ()=>{
  addNum();
  console.log()
}

</script>
<script>
import {ref} from "vue";

export const columns = ref([]);
export const list = ref([
  {id:1,content:'蛋糕很好看！室友都说美味',image:'/commit/蛋糕3.jpg'},
  {id:2,content:'好吃，爱吃！',image:'/commit/好吃.jpg'},
  {id:3,content:'汉堡王yyds!',image:'/commit/汉堡1.jpg'},
  {id:4,content:'米线，洋芋~ I like',image:'/commit/米线1.jpg'},
  {id:5,content:'美味~',image:'/commit/米线2.jpg'},
  {id:6,content:'三菜一汤，丰富午餐',image:'/commit/茄子恰恰.jpg'},
  {id:7,content:'不是哥们儿？',image:'/commit/虾.jpg'},
  {id:8,content:'草莓！嘻嘻，我爱吃草莓',image:'/commit/蛋糕2.jpg'},
  {id:9,content:'忙活了两个小时，陈师傅点了个外卖',image:'/commit/饭1.jpg'},
  {id:10,content:'该用户未作出评论，默认好评！',image:'/commit/饭2.jpg'},
  {id:11,content:'曲靖饵丝最好吃！',image:'/commit/饵丝.jpg'},
  {id:12,content:'色香味俱全！',image:'/commit/饵丝.jpg'},
  {id:13,content:'很棒的炒饭！',image:'/commit/z外卖.jpg'},
  {id:14,content:'色香味俱全！',image:'/commit/z干饭.jpg'},
  {id:15,content:'吃饱啦！！',image:'/commit/z干饭2.jpg'},
  {id:16,content:'肉量很足，味道很香！',image:'/commit/z干饭3.jpg'},
  {id:17,content:'人在家中坐，快递天上来！',image:'/commit/z快递1.jpg'},
  {id:18,content:'送的很快，小哥态度很好！',image:'/commit/z快递2.jpg'},
  {id:19,content:'一大箱按时送达！！',image:'/commit/z快递3.jpg'},
  {id:20,content:'刻晴老婆！！！！！',image:'/commit/z送东西.jpg'},
  {id:21,content:'救活了家人们，太感谢了呜呜呜！',image:'/commit/z送厕纸.jpg'}
]);
//以上数组长度与下方Math*变量一致
export function getDataList() {
  // dataList.value += 20;
  const items = [];
  for (let i = 0; i < 30; i++) {
    let data = list.value[parseInt(Math.random()*21)];
    items.push(data);
  }
  return items;
}
export function addNum(){
  const items = getDataList();
  const columnCount = 5;
  items.forEach((item, index) => {
    const columnIndex = index % columnCount;
    columns.value[columnIndex].push(item);
  })
  console.log(columns.value);
}

function handleScroll() {
  const scrollview = document.getElementsByClassName('n-scrollbar-container')[0];
  // 滚动条滚动时，距离顶部的距离
  const scrollTop = scrollview.scrollTop;
  // 可视区的高度
  const windowHeight = scrollview.clientHeight;
  // 滚动条的总高度
  const scrollHeight = scrollview.scrollHeight;
  // 当滚动条滚动到底部 并且 当前数据小于总数时进行翻页

  if (scrollTop + windowHeight === scrollHeight) {
    // 获取下一页的数据
    addNum();
  }
}
export default {
  mounted () {
    // 获取指定元素
    const scrollview = document.getElementsByClassName('n-scrollbar-container')[0];
    // 添加滚动监听，该滚动监听了拖拽滚动条
    // 尾部的 true 最好加上，我这边测试没加 true ，拖拽滚动条无法监听到滚动，加上则可以监听到拖拽滚动条滚动回调
    scrollview.addEventListener('scroll', this.scrollChange, true)
  },
  // beforeDestroy 与 destroyed 里面移除都行
  beforeDestroy () {
    // 获取指定元素
    const scrollview = document.getElementsByClassName('n-scrollbar-container')[0];
    // 移除监听
    scrollview.removeEventListener('scroll', this.scrollChange, true)
  },
  methods: {
    // 滚动监听
    scrollChange () {
      handleScroll();
    }
  }
}
</script>

<style scoped>
.waterfall {
  display: flex;
  gap: 10px;
  margin: 0 10%;
}

n-card{
  padding: 0 0 0 0;
  margin: 0;
}

.column {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.item {
  /* Card 组件的样式，根据需要调整 */
  padding:0;
}

.item img {
  width: 100%;
  height: auto;
}

.type_text{
  overflow: hidden;
  text-indent:24px;
  //white-space: nowrap;
  text-overflow: ellipsis;
  height: 2em;
}
</style>

